<template>
    <div>
        <h2>{{ msg }}</h2>
        <h2>{{ msg.split('').reverse().join('') }}</h2>
        <h2>{{ reMsgF ()}}</h2>
        <h2>{{ reMsg }}</h2>
        <input v-model="msg">
    </div>
</template>

<script>
import {  ref ,computed,watch } from "vue"
export default{
    setup(){
        const msg=ref("Hello vue")
        console.log(msg)
        function reMsgF(){
            console.log("触发reMsgF")
            return msg.value.split('').reverse().join('');
        }
        const reMsg=computed(()=>{
           console.log("触发reMsg")
            return msg.value.split('').reverse().join('');
        })
        watch(msg,(newValue,oldValue)=>{
console.log("就值是"+oldValue+",新值是"+newValue)
        })

    return{
        msg,
        reMsgF,
        reMsg
    }
    }
}
</script>

<style>
</style>